<template>
  <div class="bpmn-linter">
    <div class="linter-card">
      <div class="card-header">流程校验</div>
      <el-collapse>
        <el-collapse-item v-for="(rule, key) in rules" :key="key" :name="key" :title="`错误类型:${key}`">
          <div v-for="(item, index) in rule" :key="index">
            节点id:{{ item.id }}
            <!-- 错误信息:{{ item.message }} -->
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { TRUE } from '@formulajs/formulajs';
import { defaultSettings } from '@wf/components/bpmnjs/config';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { mapState } from 'pinia';

export default {
  name: 'BpmnLinter',
  data() {
    return {
      rules: {},
      modeler: undefined
    };
  },
  computed: {
    ...mapState(modelerStore, ['getModeler'])
  },
  watch: {
    getModeler: {
      handler(newV) {
        if (newV) {
          this.initLinter(newV);
        }
      },
      deep: true,
    }
  },
  mounted() {},
  methods: {
    initLinter(modeler) {
    //   if (this.modeler) {
    //     return;
    //   }
      this.modeler = modeler;
      // 流程数据变化时进行校验
      if (defaultSettings.useLint) {
        modeler.on('elements.changed', async (event) => {
          try {
            const lintModule = modeler.get('linting');
            lintModule.lint().then((rules) => {
              console.log('rules', rules);
              this.rules = rules;
            });
          } catch (error) {
            console.error(error);
          }
        });
      }
    }
  }
};
</script>

<style scoped>
@import '@wf/components/bpmnjs/styles/linter.scss';
</style>